/**
* @desc:  打卡记录
* @author qiankui
* @date 2023-4-15 15:37:45
*/
<template>
    <div class="page-container h-100">
        <div class="wrapperform m-b-16">
            <div class="searchbox">
                <el-form :inline="true" :model="form" class="demo-form-inline">
                  <!--姓名-->
                  <el-form-item :label="$t('name')">
                    <!--请输入姓名-->
                    <el-input class="inputEl" v-model="form.name" :placeholder="$t('Please enter your name')"></el-input>
                  </el-form-item>
                  <!--组织-->
                  <el-form-item :label="$t('organization')">
                    <el-cascader
                        ref="cascader"
                        clearable
                        collapse-tags
                        v-model="departmentIds"
                        :props="defaultProps"
                        :options="orgInfo"
                        :show-all-levels="false"
                    >
                      <template slot-scope="{ node, data }">
                        <span>{{ data.name }}</span>
                        <span v-if="data.departmentInfos!==undefined"> ({{ data.departmentInfos.length }}) </span>
                      </template>
                    </el-cascader>
                  </el-form-item>
                  <!--打卡日期-->
                  <el-form-item :label="$t('Clock in date')">
                    <el-date-picker
                        class="inputEl"
                        v-model="regDate"
                        type="daterange"
                        format="yyyy-MM-dd"
                        style="width: 240px"
                        :picker-options="pickerOptions"
                        range-separator="~"
                        :start-placeholder="$t('Start Date')"
                        :end-placeholder="$t('End Date')"
                        align="right">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item class="BlankPlaceholder" label=".">
                    <!--重置-->
                    <el-button size="small" type="handle" class="topBtn" @click="resetSearch">{{this.i18n.t('Reset')}}</el-button>
                    <!--查询-->
                    <el-button size="small" type="primary" class="topBtn" @click="onSearch">{{this.i18n.t('Query')}}</el-button>
                  </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="table-container table-box globalDiv">
            <BaseGlobalTable :table_config="table_config"
                             @addTableData="addTableData" @delTableData="delTableData"
                             @handelDetail="handelDetail" @handleSelectionChange="handleSelectionChange"
                             @handleEdit="handleEdit" ref="globalTable">
            </BaseGlobalTable>
        </div>
    </div>
</template>

<script >
    import {filterLastTreeData} from '@/views/rygl/utils.js'
    import {devicemodelgetlist} from "@/api/jxgl";
    import {fileShowSaveDialog} from "@/api/sbgl";
    import {attendancerecordExportattendancerecordtoexcel} from "@/api/kqgl";
    import {getdepartmenttree} from "@/api/pcmj/zzxx";
    import {deleteDocument} from "@/api/document";

    export default {
        name: "kqgl_index",
        components: {

        },
        props: {},
        data() {
            return {
                orgInfo: [],
                defaultProps: {
                    multiple: true,
                    children: 'departmentInfos',
                    label: 'name',
                    value: 'id',
                    checkStrictly: false,
                    disabled: function (data, node) {

                    }
                },
                departmentIds:[],
                input:'',
                pickerOptions: {
                    shortcuts: [{
                        // 最近一周
                        text: this.i18n.t('Last week'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近一个月
                        text: this.i18n.t('Last month'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        // 最近三个月
                        text: this.i18n.t('Last three months'),
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                sbjxArr:null,
                sbxhArr:null,
                departmentItem: [],
                form: {
                    departmentIds:[],
                    name:"",
                    pageNumber: 1,
                    pageSize: 10,
                },
                // 数据分析
                table_config: {
                    table_tbody: [

                    ],
                    thead: [
                        { label: "序号", prop: "@id", type: "index", width: "100" },
                        // 姓名
                        { label: this.i18n.t('name'), prop: "name", type: "function", width: "", callback: (row) => {
                                return row.personnelInfo.name
                            }},
                        // 组织
                        { label: this.i18n.t('organization'), prop: "departmentInfo", type: "function", width: "", callback: (row) => {
                                return row.personnelInfo.departmentName||'-'
                            }},
                        // 日期
                        { label: this.i18n.t('time'), prop: "clockInDate", type: "function", width: "", callback: (row) => {
                                return row.clockInDate.split(" ")[0]
                            }},
                        // 星期
                        { label: this.i18n.t('week'), prop: "dayOfWeek", type: "", width: "" },
                        // 首次打卡
                        { label: this.i18n.t('First clock in'), prop: "comeWorkClockInTime", type: "", width: "" },
                        // 末次打卡
                        { label: this.i18n.t('Last time clock in'), prop: "comeOffWorkClockInTime", type: "", width: "" }
                    ],
                    tableButtonArr: [
                        {
                            iconClass: "icon-upload iconfont-KUI",
                            btnType: 2,
                            // 导出
                            text: this.i18n.t('Export'),
                            callback: "addTableData",
                            power: "add",
                            customIcon:true
                        },
                        // {
                        //     iconClass: "icon-trash",
                        //     btnType: 2,
                        //     text: "删除",
                        //     callback: "delTableData",
                        //     power: "export",
                        // },
                    ],
                    // 列表前面是否需要显示 checkbox 框，如要显示 值写成 true
                    checkbox: false,
                    index: true,
                    showPagination: true, // 翻页器
                    // 请求表格数据的 url ，可直接传入
                    url: 'attendancerecord/getlist',
                    // 请求表格数据的 方式
                    method: "post",
                    //表格 title 文字
                    tableTitle: false,
                    //是否需要给 th 加 样式boder 如果需要加上addBoderClass 不需要显示空或者不加这个字段配置
                    addBoderClass: "addBoderClass"
                },
                regDate: '',
                selectRow: [],
                editTableRow: null,
                detailFlag: false,
                editFlag: false,
            };
        },
        computed: {},
        watch: {},
        mounted() {
            this.getdepartmenttree()
            this.setTableHeight()
            this.$refs.globalTable.loading_data();
            window.onresize = ()=>{
                this.setTableHeight()
            }
        },
        methods: {
            setTableHeight(){
                this.$set(this.table_config,'height',window.innerHeight-347)
            },
            getFormData(){
                var params = JSON.parse(JSON.stringify(this.form))
                params = {
                    startTime: this.form.dateTimeStart || null,
                    endTime: this.form.dateTimeEnd || null,
                    pageNumber: this.form.pageNumber,
                    pageSize: this.form.pageSize,
                    name:this.form.name||null,
                    departmentIds:this.form.departmentIds?this.form.departmentIds:[],
                }
                if (this.regDate) {
                    var formatStr = "yyyy-MM-dd"
                    params.startTime = new Date(this.regDate[0]).format(formatStr) + ' 00:00:00'
                    params.endTime = new Date(this.regDate[1]).format(formatStr) + ' 23:59:59'
                }
                return params
            },
            attendancerecordExportattendancerecordtoexcel(){
                var params=this.getFormData()
                // this.leftTreeLoading = true
                this.$nextTick(async () => {
                    attendancerecordExportattendancerecordtoexcel(params).then((res) => {
                        this.G.exportFile(res, this.i18n.t('Clock In List') + new Date().toLocaleString())
                        if (res.code === 200) {
                        }
                    }).catch().finally(() => {
                    })
                });
            },
            resetSearch(){
                this.regDate=""
                this.form.name=""
                this.form.departmentIds=[]
                this.departmentIds=[]
                this.$refs.globalTable.loading_data()
            },
            // 搜索
            onSearch(){

                var departmentIds=this.$refs.cascader.getCheckedNodes()

                if(!this.departmentIds.length){
                    this.form.departmentIds=[]
                }else{
                    this.form.departmentIds=[]
                    departmentIds.map(item=>{
                        this.form.departmentIds.push(item.value)
                    })
                }

                const params = {
                    pageNumber:this.form.pageNumber,
                    pageSize:this.form.pageSize,
                    orderBy:[],
                    name:this.form.name ||'',
                    departmentIds:this.form.departmentIds
                }
                if(this.regDate){
                    var formatStr="yyyy-MM-dd"
                    params.startTime=new Date(this.regDate[0]).format(formatStr)+' 00:00:00'
                    params.endTime=new Date(this.regDate[1]).format(formatStr)+' 23:59:59'
                }
                console.log(193,this.regDate);
                this.$refs.globalTable.loading_data(params);
            },
            // 选择保存路径
            fileShowSaveDialog(params){
                fileShowSaveDialog(params).then((res) => {
                    if (res.code === 200) {

                    }
                }).catch().finally(() => {
                })
            },
            sbxhChange(){
                this.onSearch()
            },
            getdepartmenttree() {
                this.$nextTick(async () => {
                    getdepartmenttree({IncludePersonInfo: false}).then((res) => {
                        if (res.code === 200) {
                            this.orgInfo =filterLastTreeData(res.data.rootDepartments)
                        }
                    }).catch().finally(() => {
                    })
                });
            },
            /**
             * @description  搜索查询
             * @param {fromdata}: Object 查询数据
             **/
            handleSearch(fromdata) {
                this.form = fromdata
                this.getTableData();
            },
            // 获取表格数据
            getTableData() {
                this.$nextTick(() => {
                    this.$refs.globalTable.loading_data(this.form);
                });
            },

            /**
             * @description  添加表格
             * @param {row}: Object 点击项数据
             **/
            addTableData() {
                this.attendancerecordExportattendancerecordtoexcel()
            },
            /**
             * @param arr:{data} --勾选的数据
             * @return: not
             * 表格勾选回调
             */
            handleSelectionChange(data) {
                this.selectRow = data;
            },
            /**
             * @param arr:{data} --当前行数据
             * @return: not
             * 表格查看的回调
             */
            handelDetail(data) {
                console.log(data);
                this.W.$tips('warning', '未实现');
                // this.$router.push({path:'/home/sybz',query:{id:data.id}})
                // this.detailFlag = true;
                // this.editTableRow = data
            },
            // 表格删除回调
            delTableData(row) {
                console.log(row);
                // 确定要删除吗
                this.W.$myConfirm('warning', this.i18n.t('Are you sure you want to delete XXX?'))
                    .then(async () => {
                        console.log('确认',deleteDocument,row.id);
                        let res = await deleteDocument({ id: row.id });
                        if (res.code == 200) {
                            // 删除成功
                            this.W.$tips("success", this.i18n.t('Successfully deleted'));
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                    });
            },
            //  表格修改回调
            handleEdit(row) {
                this.editFlag = true;
                this.editTableRow = row;
            },
        },
    };
</script>

<style scoped lang="scss">
    ::v-deep .el-form .el-col .el-form-item__label {
        width: 70px !important;
        text-align: right;
    }
    ::v-deep .el-form .el-col .el-form-item__content {
        display: inline-block;
        width: 200px;
    }
    ::v-deep .BlankPlaceholder .el-button {
        float: right;
        margin: 0 10px;
        padding: 10px 25px;
    }
    .right-height {
        height: calc(100% - 36px);
    }
    ::v-deep .content-width .el-form.wrapperform-box .el-form-item {
        width: calc((100% - 100px) / 3);
    }
    .topBtn {
        padding: 9px 20px;
    }
    ::v-deep .icon-upload {
        margin-right: 5px;
    }
</style>
